<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
    <style scoped="scope">
        .majorName {
            width: 100%;
            line-height: 50px;
            text-align: center;
            background-color: lightgray;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <div class="majorName">
            {{majorName}}专业教学计划
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" prop="num" label="序号" width="180"></el-table-column>
            <el-table-column prop="educationPlanId" label="计划号">
            </el-table-column>
            <el-table-column prop="educationGrade" label="年级"></el-table-column>
            <el-table-column prop="courseName" label="课程名称">
            </el-table-column>
            <el-table-column prop="courseType" label="课程类别"></el-table-column>
            <el-table-column prop="studyScore" label="学分"></el-table-column>
            <el-table-column prop="studyTerm" label="开课学期"></el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            majorName: '',
            num: 1,
            pageIndex: 1,
            pageSize: 5,
            total: 100,
            tableData: []
        },
        created: function () {
            this.getEducationMsg();
        },
        methods: {
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getEducationMsg();
            },
            getEducationMsg: function () {
                $.ajax({
                    type: 'post',
                    url: '/api/student/listEducation',
                    data: {pageIndex: this.pageIndex},
                    dataType: 'json',
                    success: function (res) {
                        _this.majorName = res.resData.list[0].major.majorName;
                        _this.total = res.resData.total;
                        _this.pageSize = res.resData.pageSize;
                        _this.tableData = res.resData.list;
                        console.log(res)
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            }
        }
    })

</script>
</body>
</html>
